﻿@*@model IEnumerable<Campus.Entities.Responsable>
*@


@{
    ViewBag.Title = "Responsable";
}

<h2>Responsables</h2>

    <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>    
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>    

    
    
<script src="../../Scripts/grid.locale-es.js"></script>

<link href="../../Content/css/ui.jqgrid.css" rel="stylesheet" />

<script src="../../Scripts/jquery.jqGrid.min.js"></script>

<script type="text/javascript">

    alert(document);
    jQuery(document).ready(function()
    {

        alert("dentro");
            jQuery("#list4").jqGrid
            (
                {
                        data: mydata,
                        datatype: "local",
                        height: 250,
                        colNames:['Inv No','Date', 'Client'],
                        colModel:[
                            {name:'id',index:'id', width:60},
                            {name:'invdate',index:'invdate' },
                            {name:'name',index:'name', width:100}
                                ],
                                pager: '#pager',
                                rowNum:2,
                                rowList:[10,20,30],
                                sortname: 'id',
                                sortorder: 'desc',
                                viewrecords: true,
                                multiselect: true,
                                imgpath: "",
                                caption: "Manipulating Array Data"
                }
            );

    var mydata = [  {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"2",invdate:"2007-10-01",name:"test"},
                    {id:"3",invdate:"2007-10-01",name:"test"},
                    {id:"4",invdate:"2007-10-01",name:"test"},
                    {id:"5",invdate:"2007-10-01",name:"test"},
                    {id:"6",invdate:"2007-10-01",name:"test"},
                    {id:"7",invdate:"2007-10-01",name:"test"},
                    {id:"8",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"}
                    ];
    for (var i = 0; i <= mydata.length; i++) {
        alert(i);
        jQuery("#list4").addRowData(i, mydata[i]);
    }
            }//function
    );//ready

</script>




<table id="list4">

</table>

<div id="pager" class="scroll" style="text-align:center;"></div>

 @*<script type="text/javascript">
     $(document).ready(function () {         
             $("#list").jqGrid({
                 url: '/Responsables/ResponsablesHandler',
                 datatype: 'json',
                 mtype: 'GET',
                 colNames: ['Nombre', 'Apellido', 'DNI'],
                 colModel: [
                           { name: 'Nombre', index: 'Nombre', width: 40, align: 'left' },
                           { name: 'Apellido', index: 'Apellido', width: 40, align: 'left' },
                           { name: 'DNI', index: 'DNI', width: 400, align: 'left' }],
                 pager: jQuery('#pager'),
                 rowNum: 10,
                 rowList: [5, 10, 20, 50],
                 sortname: 'DNI',
                 sortorder: "desc",
                 viewrecords: true,
                 imgpath: '/content/themes/ui-lightness/images',
                 caption: 'Appeal Case Records'
             });
         });



      //    var source =
      //      {
      //          url: "Responsables/ResponsablesHandler",
      //          datatype: "json",
      //          datafields: [{ name: "Nombre" }, { name: "Apellido" }, { name: "DNI", type: int }]
      //      };

      //    var dataAdapter = new $.jqx.dataAdapter(source);

      //    $("#jqxgrid").jqxGrid(
      //      {
      //          source: dataAdapter,
      //          columns: [
      //            { text: 'Nombre', dataField: 'Nombre', width: 100 },
      //            { text: 'Apellido', dataField: 'Apellido', width: 100 },
      //            { text: 'DNI', dataField: 'DNI', width: 180 },                  
      //          ]
      //      });
      //});



    </script>*@

<div>

    <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>

</div>


<hr />
